<template>
  <div class="home_left_box_list" :style="props.styleMain">
    <div 
      class="home_left_box_list_item" 
      v-for="item in props.data" 
      :key="item.id" 
      @click="clickListOne(item)"
      :style="props.styleOne"
    >
    <!-- {{ item.time_tag }}/{{ item.type_tag }}/{{ item.length_tag }} -->
      <img 
        class="home_left_box_list_item_img" 
        :src="store.state.baseURL + item.img" 
        :alt="item.title"
        loading="lazy"
      />
      
      <div class="home_left_box_list_item_info">
        <div class="home_left_box_list_item_info_title oneLine" :title="item.title">
          {{ item.title }}
        </div>
        <div class="home_left_box_list_item_info_score">
          <n-rate 
            readonly 
            size="small" 
            :value="Number(item.average_score)/2" 
            :allow-half="true" 
          />
          <span>{{Number(item.average_score).toFixed(1)}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import store from '@/store';
import { NRate } from 'naive-ui';
import { ref } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
    required: true
  },
  clickListOne: {
    type: Function,
    default: () => {}
  },
  styleOne:{
    type: Object,
    default: () => {}
  },
  styleMain:{
    type: Object,
    default: () => {}
  }
});
</script>
<style lang="scss" scoped>
@import '@/styles/base.scss';
.home_left_box_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
    gap: 0.8rem;
    
    &_item {
      cursor: pointer;
      border-radius: $baseBorderRadius;
      overflow: hidden;
      transition: transform 0.3s;
      aspect-ratio: 3/4;
      position: relative;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        
        .home_left_box_list_item_info {
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
        }
      }
      
      &_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      &_info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.5rem ;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        transition: background 0.3s;
        
        &_title {
          color: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        &_score {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          span {
            color: #fff;
            font-weight: bold;
            font-size: 1.2rem;
          }
        }
      }
    }
  }
</style>

